﻿<template>
    <div v-cloak class="flex-column bg-light">
        <component is="style" />
        <div class="flex-row bg-light padding-15" style="flex-wrap: wrap;">
            <span>共享空间：</span>
            <div v-for="(x,idx) in objList" :key="idx">
                <span class="text-blue margin-right-4" v-on:click="back(x,idx)">{{x.hdTitle}} /</span>
            </div>
            @*<span class="fa fa-plus text-blue padding-left-6" v-on:click="openEdit(1,null,0)"></span>*@
        </div>
        <div class="flex-row-fill">
            <template v-if="list.length==0">
                <van-empty description="暂无数据"></van-empty>
            </template>
            <template v-else>
                <van-cell v-for="(item,index) in list" :key="index" v-on:click="open(item)">
                    <template #title>
                        <div v-if="item.hdType==1" class="padding-tp-10"
                             style="display: inline-flex;align-items: center;justify-content: center;position: relative;line-height: 1;white-space: nowrap;width: -webkit-fit-content;width: fit-content;font-size: var(--tn-font-size);">
                            <span class="tn-icon-order"></span>
                            <span class="margin-left-6">{{item.hdTitle}}</span>
                        </div>
                        <div v-else class="padding-tp-10">
                            <span class="tn-icon-folder-fill"></span>
                            <span class="margin-left-6">{{item.hdTitle}}</span>
                        </div>
                    </template>
                    <template #label>
                        <span>{{item.oiName}}</span>
                        <span class="margin-left-sm">{{item.makeTime}}</span>
                    </template>
                    <template>
                        <div v-if="item.hdStatus == 0&&((fn.edit&&item.oiId==optor.openId)||fn.root)">
                            <van-tag class="bg-cyanLight color-cyan" size="small" v-on:click.stop="openEdit(2,item,0)">编辑</van-tag>
                        </div>
                        <div class="margin-left-xs" v-if="item.hdStatus == 0&&((fn.edit&&item.oiId==optor.openId)||fn.root)">
                            <van-tag class="bg-redLight color-red" size="small" v-on:click.stop="openEdit(3,item,index)">删除</van-tag>
                        </div>
                    </template>
                </van-cell>
            </template>
        </div>
        <hxt-popup v-model="detail.show" position="bottom" style="height: 100%; max-height: 100%;" getContainer="body">
            <div class="h100 hidden-x">
                <media-detail v-if="detail.show" :mediaList="mediaList"></media-detail>
            </div>
        </hxt-popup>
        <hxt-popup v-model="drawer.show" position="bottom" style="height: 100%; max-height: 100%;" getContainer="body" :title="drawer.title">
            <div class="flex-column">
                <van-cell-group class="flex-column-fill">
                    <van-field v-model="form.hdPtitle" label="上级目录" readonly></van-field>
                    <van-cell title="类型" class="van-cell-left">
                        <van-radio-group v-model="form.hdType" v-on:change="radioChange($event,0)"
                                         :disabled="form.optType==1">
                            <div class="flex-row">
                                <van-radio :name="0">目录</van-radio>
                                <van-radio :name="1" class="padding-left-10">文档</van-radio>
                            </div>
                        </van-radio-group>
                    </van-cell>
                    <van-field v-model="form.hdTitle" label="名称" placeholder="请输入文档名称"></van-field>
                    <van-cell title="公开" class="van-cell-left">
                        <van-radio-group v-model="form.share" v-on:change="radioChange($event,1)"
                                         :disabled="form.pshare==1">
                            <div class="flex-row">
                                <van-radio :name="0">公开</van-radio>
                                <van-radio :name="1" class="padding-left-10">私有</van-radio>
                            </div>
                        </van-radio-group>
                    </van-cell>
                    <block v-if="form.hdType==1">
                        <van-cell title="通知内容" class="van-cell-left">
                            {{form.mediaList.length<=0?'请点击下面的内容标签，添加通知内容':''}}
                        </van-cell>
                        <edit-media v-if="drawer.show" v-model="form.mediaList" v-on:update="update"></edit-media>
                    </block>
                </van-cell-group>
                <div class="padding-15">
                    <van-button round block type="info" v-on:click="submit">保 存</van-button>
                </div>
            </div>
        </hxt-popup>
    </div>
</template>
<script>
    module = (function (hxt) {
        return {
            name: 'document',
            data: function () {
                var _this = this, optor = hxt.store.optor;
                return {
                    optor: optor,
                    browser: hxt.wxBrowser(), // 1：手机微信；4：小程序
                    fn: {
                        edit: optor.canDo(30901),
                        root: optor.canDo(30902)
                    },
                    objList: [],
                    list: [],
                    menuShow: false,
                    mediaList: [],
                    detail: {
                        show: false
                    },
                    form: {
                        optType: 0,
                        hdPtitle: '',
                        hdId: 0,
                        hdPid: 0,
                        hdType: 0,
                        hdTitle: '',
                        hdStatus: 0,
                        share: 0,
                        pshare: 0,
                        type: 0,
                        mediaList: []
                    },
                    drawer: {
                        show: false,
                        title: ''
                    },
                    actions: [{
                        text: '修改',
                        icon: 'edit'
                    }, {
                        text: '删除',
                        icon: 'delete-o'
                    }],
                    showPopover: false,
                };
            },
            computed: {
                parentName: function () {
                    var _this = this;
                    return _this.objList.map(function (item) {
                        return item.hdTitle;
                    }).join(' /  ') + ' /  ';
                },
                actionsNew: function () {
                    var _this = this;
                    return [{
                        icon: 'x fa fa-folder-o',
                        text: '文件夹',
                        disabled: false
                    },
                    {
                        icon: 'x fa fa-file-text-o',
                        text: '文件',
                        disabled: false
                    }
                    ];
                }
            },
            activated: function () {

            },
            watch: {

            },
            mounted: function () {
                var _this = this;
                _this.$parent.showHome = true;
                _this.loadList({
                    hdId: 1,
                    hdTitle: '公共文档',
                    share: 0
                });
            },
            methods: {
                open: function (obj) {
                    if (obj.hdType == 1) return this.preview(obj);
                    this.loadList(obj);
                },
                loadList: function (obj) {
                    var _this = this;
                    _this.objList.push(obj);
                    hxt.post({
                        url: hxt.config.link + 'wx/HelperDocList',
                        data: {
                            id: obj.hdId
                        },
                        ok: function (res) {
                            if (res.code != 0) return hxt.error('加载失败：' + res.errmsg + '，请稍后重试！');
                            _this.list = res.data;
                        }
                    });
                },
                preview: function (obj) {
                    var _this = this;
                    hxt.post({
                        url: hxt.config.link + 'pc/HelperDocInfo',
                        data: {
                            hdId: obj.hdId
                        },
                        ok: function (res) {
                            if (res.code != 0) return hxt.error('加载失败：' + res.errmsg + '，请稍后重试！');
                            _this.mediaList = res.data.mediaList;
                            _this.detail.show = true;
                        }
                    });
                },
                back: function (obj, idx) {
                    var _this = this;
                    _this.objList.splice(idx, _this.objList.length - idx);
                    _this.loadList(obj);
                },
                openEdit: function (flag, g, index) { //1：新增；2：修改；3：删除；
                    var _this = this,
                        obj = _this.objList[_this.objList.length - 1];
                    if (!_this.optor.bucketName) return hxt.error('暂未设置Bucket名称,请先到【个人信息】提交Bucket名称,才能上传文件');
                    if (flag == 1) {
                        _this.form = {
                            optType: 0,
                            hdPid: obj.hdId,
                            hdId: 0,
                            hdKind: 1,
                            hdType: 0,
                            hdTitle: '',
                            hdStatus: 0,
                            mediaList: [],
                            share: parseInt(obj.share),
                            pshare: obj.share,
                            hdPtitle: obj.hdTitle
                        };
                        _this.drawer.title = '新建文档（目录）';
                        _this.drawer.show = true;
                    };
                    if (flag == 2) {
                        hxt.post({
                            url: hxt.config.link + 'pc/HelperDocInfo',
                            data: {
                                hdId: g.hdId
                            },
                            ok: function (res) {
                                if (res.code != 0) return hxt.error('加载失败：' + res.errmsg + '，请稍后重试！');
                                _this.form = res.data;
                                _this.form.optType = 1;
                                _this.form.hdPid = obj.hdId;
                                _this.form.hdPtitle = obj.hdTitle;
                                _this.drawer.title = '修改文档（目录）';
                                _this.drawer.show = true;
                            }
                        });
                    }
                    if (flag == 3) {
                        hxt.confirm("注意：删除后不能找回", function () {
                            hxt.post({
                                url: hxt.config.link + "pc/HelperDocSave",
                                data: {
                                    optType: 2,
                                    hdId: g.hdId
                                },
                                ok: function (res) {
                                    if (res.code != 0) return hxt.error('删除失败：' + res.errmsg);
                                    hxt.success('删除成功');
                                    _this.list.splice(index, 1);
                                }
                            });
                        });
                    }
                },
                radioChange: function (e, type) {
                    var _this = this;
                    if (type == 1) return _this.form.share = e;
                    _this.form.hdType = e;
                    _this.form.mediaList = [];
                },
                update: function (e) {
                    var _this = this;
                    _this.form.mediaList = e;
                },
                submit: function () {
                    var _this = this,
                        form = JSON.parse(JSON.stringify(_this.form));
                    if (!$.trim(form.hdTitle)) return hxt.error('保存失败：文档名称不能为空');
                    else if (form.mediaList.length < 1 && form.hdType == 1) return hxt.error("请至少添加一项通知内容");
                    for (var i = 0; i < form.mediaList.length; i++) {
                        var md = form.mediaList[i];
                        if (md.miType == 1 && !$.trim(md.miTitle) && form.hdType == 1) return hxt.error(
                            "请为通知内容第{0}项输入文字".xFormat(i + 1));
                    };
                    var title = _this.form.hdType == 0 ? '确定保存此目录?' : '确定保存此文档?';
                    hxt.confirm(title, function () {
                        var saveToServer = function () {
                            hxt.unmask();
                            var data = form,
                                mediaList = data.mediaList.map(function (item, index) {
                                    return {
                                        miId: item.miId,
                                        miDuration: item.miDuration,
                                        miIndex: index,
                                        miSize: item.miSize,
                                        miTitle: item.miTitle,
                                        miType: item.miType,
                                        miUrl: item.miUrl
                                    }
                                });
                            data.mediaList = data.hdType == 1 ? encodeURIComponent(JSON.stringify(mediaList)) :
                                "";
                            hxt.post({
                                url: hxt.config.link + 'pc/HelperDocSave',
                                data: data,
                                ok: function (res) {
                                    if (res.code != 0) return hxt.error('保存失败：' + res.errmsg + '，请稍后重试！');
                                    _this.back(_this.objList[_this.objList.length - 1], _this
                                        .objList.length - 1);
                                    _this.drawer.show = false;
                                }
                            });
                        };

                        var upload = function () {
                            var row = form.mediaList.find(function (item) {
                                return item.miType > 1 && item.miType != 5 && !item.miUrl.startsWith('https://');
                            });
                            console.log(row)
                            if (!!row) {
                                hxt.uploadFile({
                                    signUrl: hxt.config.link + 'pc/v3OssToken',
                                    base64: row.miUrl,
                                    file: null,
                                    compress: false,
                                    folder: _this.optor.bucketName + '/helper/wx',
                                    success: function (res) {
                                        row.imgUrl = res.data.url;
                                        saveToServer(optor);
                                    },
                                    fail: function (err) {
                                        hxt.unmask();
                                        hxt.error('附件上传失败：' + err);
                                    }
                                });
                            } else {
                                saveToServer();
                            };
                        };
                        hxt.mask();
                        upload();
                    });
                },

            },
            components: {
                mediaDetail: function () { return hxt.staticComponent(@Html.Raw(this.vueComponent("~/Views/wx/Components/wx.media.detail.cshtml"))); },
                editMedia: function () { return hxt.staticComponent(@Html.Raw(this.vueComponent("~/Views/wx/Components/wx.media.cshtml"))); },
            }
        };
    })(window.$jscript.fn);
</script>
<style lang="scss">

</style>